/*
用于存储JS的工具函数

函数封装,遵循小而美的原则
1.使用方便,复用灵活
2.实现功能的函数代码简介
3.函数的性能心法:复用封函数,变化改参数
*/

/**
 * @description 通过指定选择器获取对应函数节点
 * @param { string } selector 选择器
 * @returns 函数节点
 */
//菜鸡写法
// function $(selector) {
// 	return document.querySelector(selector);
// }
//有点像样写法
// function $(selector, isAll = false) {
// 	if (isAll) {
// 		return document.querySelector(selector);
// 	} else {
// 		return document.querySelectorAll(selector);
// 	}
// }
//业内常用写法
function $(selector) {
	const nodeList = document.querySelectorAll(selector);
	if (nodeList.length === 0) {
		//伪数组长度为0,没有查询到节点,给个提醒 console.warn()
		return console.warn(`${selector} 栽种,你节点呢`);
	}
	if (nodeList.length === 1) {
		//伪数组长度为1,查询到单个节点,直接将第0个取出
		return nodeList[0];
	}
	if (nodeList.length > 1) {
		//伪数组长度大于1时,查询到多个节点,直接返回节点列表
		return nodeList;
	}
}

//tab选项卡函数封装
// 1.实现基本功能
// 2.确定函数名tab()
// 3.确定函数参数个数tabselector,tabclassName,contselector,contclassName
// 4.确定返回值
// 5.将功能代码放入函数壳子,替换对应变量
function tab(tabselector, tabclassName, contselector, contclassName) {
	// 功能四: 点击tab栏激活对应样式
	// 1.获取相关节点
	// 2.给每个li绑定点击事件
	$(tabselector).forEach(function (v, i) {
		v.addEventListener("click", function () {
			$(tabselector).forEach(function (item, index) {
				//排他思想
				item.classList.remove(tabclassName);
				// 2.让所有卡片消失
				if (contselector) {
					$(contselector)[index].classList.remove(contclassName);
				}
			});
			this.classList.add(tabclassName);
			// 功能五: 点击tab显示对应的内容
			// 1.获取相关节点
			// 3.点击li通过对应内容的索引显示对应卡片内容
			if (contselector) {
				$(contselector)[i].classList.add(contclassName);
			}
		});
	});
}
// 6.调用测试
// 7.优化代码
